<!--  -->
<template>
  <div class="category">
    <div style="margin-bottom: 5px">
      <el-button style="margin-left: 5px" type="success" @click="addOne"
        >新增一级类目
      </el-button>
    </div>

    <el-table :data="categorys" stripe border>
      <el-table-column type="index" label="233"> </el-table-column>
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="类目名称"></el-table-column>

      <el-table-column label="操作1">
        <template slot-scope="scope">
          <el-button type="primary" @click="getSecond(scope.row)"
            >查看二级类目</el-button
          >
        </template>
      </el-table-column>

      <el-table-column label="操作1">
        <template slot-scope="scope">
          <el-button type="warning" @click="editOne(scope.$index, scope.row)"
            >修改</el-button
          >
        </template>
        
      </el-table-column>

      <el-table-column label="操作2">
        <template slot-scope="scope">
          <el-button
            type="danger"
            @click="delOne(scope.row, scope.$index, categorys)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="show" :title="dialog_title" :fullscreen="true">
      <two-dialog :id="curId"></two-dialog>
    </el-dialog>

    <el-dialog :visible.sync="editoradd" :title="dialog_title">
      <el-form>
        <el-form-item>
          一级类目名称:
          <el-input
            style="width: 60%; margin-right: 10px"
            v-model="text"
          ></el-input>
          <el-button type="primary" @click="sub">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-pagination></el-pagination>
  </div>
</template>

<script>
import {
  getAllCategory,
  delOneCategoryById,
  addOneCategory,
  editOneCategory,
} from "@/api/categorys";
import { Message } from "element-ui";
import TwoDialog from "./twoDialog.vue";
export default {
  name: "",
  props: [""],
  data() {
    return {
      categorys: null, //一级目录数组
      show: false, //是否显示二级目录
      dialog_title: "", //弹窗标题
      curId: -1, //当前行id
      curIndex: -1, //当前行索引
      editoradd: false, //是否显示增加修改弹窗
      isAdd: true, //增加类目还是修改类目
      text: "", //修改或者增加输入框文本
    };
  },
  components: {
    TwoDialog,
  },
  computed: {},
  created() {
    this.getAll();
  },
  beforeMount() {},
  mounted() {},
  methods: {
    /**
     * 获取所有类目数据
     */
    getAll() {
      getAllCategory().then((res) => {
        res.code === 20000
          ? (this.categorys = res.data)
          : Message.error("数据加载出错" + message);
      });
    },
    /**
     * 查看二级类目
     */
    getSecond(row) {
      this.dialog_title = `${row.name}的二级目录`;
      this.curId = row.id;
      this.show = true;
    },
    /**
     * 删除一级类目
     */
    delOne(row, index, rows) {
      delOneCategoryById(row.id).then((res) => {
        res.code === 20000
          ? (Message.success("删除成功"), rows.splice(index, 1))
          : Message.error("删除失败" + message);
      });
    },
    /**
     * 增加一级类目
     */
    addOne() {
      this.isAdd = true;
      this.text = "";
      this.dialog_title = "增加一级类目";
      this.editoradd = true;
    },
    /**
     * 修改一级类目
     */
    editOne(index, row) {
      this.isAdd = false;
      this.curId = row.id;
      this.dialog_title = "修改一级类目";
      this.text = row.name;
      this.curIndex = index;
      this.editoradd = true;
    },
    /**
     * 提交修改或新增一级目录操作
     */
    sub() {
      this.text === ""
        ? Message.warning("请输入内容")
        : this.isAdd
        ? addOneCategory(this.text).then((res) => {
            res.code === 20000
              ? (Message.success("增加一级目录成功"),
                this.categorys.push(res.data),
                (this.editoradd = false))
              : Message.error("增加一级目录失败" + message);
          })
        : editOneCategory(this.text, this.curId).then((res) => {
            res.code === 20000
              ? (Message.success("修改一级目录成功"),
                (this.categorys[this.curIndex].name = this.text),
                (this.editoradd = false))
              : Message.error("修改一级目录失败" + message);
          });
    },
  },
  watch: {},
};
</script>

<style lang='scss' scoped>
.category {
  margin: 15px;
}
</style>